import { ref, onMounted, onUnmounted } from 'vue';

export default   ()=> {
    const count = ref(0);
    const y = ref(0);
    const modifyBac = (c)=>{
        let element = document.querySelector('.menu-class');
        element.style.backgroundColor = c;
    }
    const  testFun = (color) => {
        alert(color)
    }
    const  modifyDark =(c)=>{
        document.querySelectorAll('.arco-menu-inline-header').forEach(item=>{
            item.style.backgroundColor = c;
        })
    }
    const modifyPopHeader=(c)=>{
        document.querySelectorAll('.arco-menu-item').forEach(item=>{
            item.style.cssText = `background-color: ${c} !important;`;
        })
    }
    const modifyPopHeaders=(c)=>{
        document.querySelector('.arco-menu-overflow-wrap').style.cssText = `background-color: ${c} !important;`;
    }
    const modifyPopHeaderss=(c)=>{
        document.querySelectorAll('.arco-menu-inner').forEach(item=>{
            item.style.cssText = `background-color: ${c};`;
        })
    }
    const modifyFont = (c) =>{
        /*    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;*/
        document.querySelector('body').style.cssText=`color: ${c};`
    }
    const modifyBacColor=(color,...elements) =>{
         elements.forEach(item=>{
             console.log(item);

         })
    }
    function updatePosition(event) {
        count.value = event.pageX;
        y.value = event.pageY;
    }
    return { count, y
        ,testFun,
        modifyBac,
        modifyDark,
        modifyPopHeader,
        modifyPopHeaders,
        modifyPopHeaderss,
        modifyFont,
        modifyBacColor
    };
}
